<template>
  <div>
    <!-- 引入公共代码 -->
    <Secrety @add="add" @search="load" @change="text => searchName = text">
      <!-- 表格  -->
      <a-table :columns="tableColumns" :data-source="tableData" :pagination="pagination" @change="handleTableChange">
        <template slot="action" slot-scope="text, record">
          <!-- 编辑 -->
          <a-button type="link" v-if="hasPermission('edit')" @click="add(record)">
            编辑
          </a-button>
          <!-- 删除 -->
          <a-popconfirm placement="top" ok-text="是" cancel-text="否" @confirm="deleteRow(record.id)">
          <template slot="title">
            确认删除
          </template>
          <a-button type="link" v-if="hasPermission('delete')" >
            删除
          </a-button>
        </a-popconfirm>
        </template>
      </a-table>
    </Secrety>
    <!-- 新增编辑 -->
    <SecretyEdit ref="SecretyEdit"  :submit="submit" :formItems="editFormItems" ></SecretyEdit>
  </div>
</template>

<script>

// 1、引入Vue等框架组件库或插件
// 2、引入自定义组件
import SecretyEdit from "./SecretyEdit";
// 3、引入第三方工具类插件
// 4、引入自定义工具或插件或混入或基类等
import SecretyMixin from "./secrety-mixin.js";
// 5、引入API
// 获取MJ api
import { getBusinessList, saveBusiness, deleteBusiness } from '../../api/mj'
export default {
  /* 业务mj */
  name: 'SecretyBusiness',
  components: {
    SecretyEdit
  },
  mixins: [ SecretyMixin ],
  data () {
    return {
      tableData: []
    }
  },
  computed: {
    // 表格字段 主要是mj名称要替换
    tableColumns(){
      const result = [
        {
          dataIndex: 'name',
          title: `${this.MJText}名称`,
          align: 'center',
          key: 'name'
        },
        {
          dataIndex: 'grade',
          title: `${this.MJText}等级`,
          align: 'center',
          key: 'grade'
        },
        {
          dataIndex: 'createTime',
          title: '创建时间',
          align: 'center',
          key: 'createTime'
        },
        {
          dataIndex: 'option',
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          key: 'option'
        },
      ]
      return result
    },
    /* 新增页面的表单配置 */
    editFormItems(){
      return [
        /* MJ名称 */
        {
          // 文本
          label: `${this.MJText}名称`,
          // form里面的key
          key: 'name',
          // 控件类型
          type: 'a-input',
          // 是否必填 默认false,
          required: true
        },
        /* MJ等级 */
        {
          // 文本
          label: `${this.MJText}等级`,
          // form里面的key
          key: 'grade',
          // 控件类型
          type: 'a-input-number',
          // 控件属性
          attrs: {
            min: 0,
            style: {
              width: '100%'
            }
          },
          // 是否必填 默认false,
          required: true
        }
      ]
    }
  },
  mounted () {
    this.load()
  },
  methods: {
    add(record){
      this.$refs.SecretyEdit.open(record)
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.load()
    },
    load(){
      const param = {
        searchKey: this.searchName,
        currPage: this.pagination?.current || 1,
        pageSize: this.pagination?.pageSize || 10
      }
      getBusinessList(param).then(res => {
        this.tableData = res.list
        this.pagination.current = res.currPage
        this.pagination.total = res.totalCount
        this.pagination.pageSize = res.pageSize
      })
    },
    submit(form){
      saveBusiness(form).then(res => {
        /* 重新加载列表 */
        this.load()
      })
    },
    deleteRow(id){
      deleteBusiness(id).then(res => {
        this.pagination.current = 1
        this.load()
      })
    }
  },
}
</script>

<style lang="less" scoped>
</style>